<template>
  <div class="app-container index-box">
    <div class="index-search">
      <el-select :filterable="true" v-model="searchForm.timeType" placeholder="请选择" @change="handleChangeTime">
        <i slot="prefix" class="el-input__icon el-icon-date" />
        <el-option v-for="item in dateArr" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-date-picker
          v-model="dataTimeArr"
          v-show="searchForm.timeType == 0"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left: 20px"
          value-format="yyyy-MM-dd"
          @change="handleChangeDate"
      >
      </el-date-picker>
      <el-select :filterable="true" v-model="searchForm.tenantId" placeholder="请选择" style="margin-left: 20px" @change="handleChangeTenant">
        <div slot="prefix" class="el-ship">
          <img src="@/assets/images/ship-icon.png" alt="" />
        </div>
        <el-option v-for="item in shipArr" :key="item.tenantId" :label="item.tenantName" :value="item.tenantId"> </el-option>
      </el-select>
    </div>
    <div class="index-content">
      <div class="content-top">
        <div
            :class="chooseIndex == index ? 'content-top-choose' : 'content-top-box'"
            v-for="(item, index) in contentArr"
            :key="index"
            @click="handleChangeIndex(index)"
        >
          <div v-show="index == 0" class="content-warn">
            <div>告警总次数</div>
            <div>{{ item.warningCount }}</div>
          </div>
          <div v-show="index != 0" class="content-ship">
            <div class="content-ship-top">
              <img v-show="chooseIndex == index" src="@/assets/images/ship-icon3.png" alt="" />
              <img v-show="chooseIndex != index" src="@/assets/images/ship-icon2.png" alt="" />
              <div class="company-name" :title="item.tenantName">{{ item.tenantName }}</div>
            </div>
            <div class="content-ship-count">
              <div>告警总次数</div>
              <div>{{ item.warningCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <el-tabs v-model="activeName">
          <el-tab-pane label="告警统计" name="first">
            <div class="content-bottom-warn">
              <section-card title="告警类型统计">
                <div class="content-warntype" id="warnType"></div>
              </section-card>
              <section-card title="告警等级统计">
                <div class="content-warnlevel" id="warnLevel"></div>
              </section-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="船舶告警统计" name="second">
            <section-card title="船舶告警统计">
              <div v-if="shipWarnArr && shipWarnArr.length > 0" class="content-bottom-ship">
                <div class="content-ship-left">
                  <div
                      :class="shipIndex == index ? 'content-ship-box content-ship-choose' : 'content-ship-box'"
                      v-for="(item, index) in shipWarnArr"
                      :key="index"
                      @click="handleChangeShipIndex(index)"
                  >
                    <div class="content-ship-line">{{ item.shipName }}</div>
                    <div>告警（次）：{{ item.warningCount || 0 }}</div>
                  </div>
                </div>
                <div class="content-ship-right">
                  <div class="content-ship-right-top">
                    <div class="content-right-title">
                      <span>{{ list[0] && list[0].shipName }}</span>
                      <span style="margin-left: 20px">MMSI: {{ list[0] && list[0].mmsi }}</span>
                    </div>
                    <div>
                      <span>累计告警 {{ list[0] && list[0].warningTotal }}次</span>
                      <span style="margin-left: 40px">周期内告警 {{ list[0] && list[0].warningCount }}次</span>
                    </div>
                  </div>
                  <div class="ship-box">
                    <div class="content-ship-title">
                      <div class="ship-circle"></div>
                      <div>确警统计</div>
                    </div>
                    <avue-crud
                        ref="crud"
                        class="crud-table"
                        :header-cell-class-name="() => 'crud-table-head'"
                        :cell-class-name="() => 'crud-cell'"
                        :option="affirmativeOption"
                        :data="list"
                    >
                      <template #confirmTimeoutRate="{ row }">
                        <div>{{ row.confirmTimeoutRate ? `${(row.confirmTimeoutRate * 100).toFixed(2)}%` : `0%` }}</div>
                      </template>
                    </avue-crud>
                  </div>
                  <div class="ship-box">
                    <div class="content-ship-title">
                      <div class="ship-circle"></div>
                      <div>处理统计</div>
                    </div>
                    <avue-crud
                        ref="crud"
                        class="crud-table"
                        :header-cell-class-name="() => 'crud-table-head'"
                        :cell-class-name="() => 'crud-cell'"
                        :option="dealOption"
                        :data="list"
                    >
                      <template #handleTimeoutRate="{ row }">
                        <div>{{ row.handleTimeoutRate ? `${(row.handleTimeoutRate * 100).toFixed(2)}%` : `0%` }}</div>
                      </template>
                    </avue-crud>
                  </div>
                  <!-- <div class="ship-box">
                    <div class="content-ship-title">
                      <div class="ship-circle"></div>
                      <div>误警统计</div>
                    </div>
                    <avue-crud ref="crud" class="crud-table" :header-cell-class-name="() => 'crud-table-head'" :cell-class-name="() => 'crud-cell'" :option="falseAlarmOption" :data="list">
                      <template #errorRate="{row}">
                        <div>{{ row.errorRate ? `${(row.errorRate * 100).toFixed(2)}%` : `0%` }}</div>
                      </template>
                    </avue-crud>
                  </div> -->
                </div>
              </div>
              <div v-else>
                <el-empty description="暂无数据"></el-empty>
              </div>
            </section-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { affirmativeOption, dealOption, falseAlarmOption } from './detail.option.js'
import { getWarnSummary, getShipWarnSummay, getShipWarnDetail, getWarnTimes } from '@/api/warnmessage'
export default {
  name: 'Index',
  components: {},
  data() {
    return {
      searchForm: {
        timeType: 1,
        tenantId: 'all'
      },
      dataTimeArr: [],
      // 日期下拉
      dateArr: [
        {
          label: '今天',
          value: '1'
        },
        {
          label: '昨天',
          value: '2'
        },
        {
          label: '本周',
          value: '3'
        },
        {
          label: '上周',
          value: '4'
        },
        {
          label: '本月',
          value: '5'
        },
        {
          label: '上个月',
          value: '6'
        },
        {
          label: '本季度',
          value: '7'
        },
        {
          label: '上一季度',
          value: '8'
        },
        {
          label: '本年',
          value: '9'
        },
        {
          label: '上一年',
          value: '10'
        },
        {
          label: '自定义',
          value: '0'
        }
      ],
      shipArr: [
        {
          tenantName: '全部',
          tenantId: 'all'
        }
      ],
      contentArr: [],
      modelTypeCountList: [], // 告警类型统计
      modelLevelCountList: [], // 告警等级统计
      chooseIndex: 0,
      shipIndex: 0,
      shipId: '',
      shipName: '', //船舶名称
      mmsi: '', //mmsi
      activeName: 'first', //头部选择
      shipWarnArr: [],
      list: []
    }
  },
  computed: {
    affirmativeOption() {
      return affirmativeOption.call(this)
    },
    dealOption() {
      return dealOption.call(this)
    },
    falseAlarmOption() {
      return falseAlarmOption.call(this)
    }
  },
  async created() {
    const data = await getWarnTimes(this.$store.state.user.tenantId)
    console.log('🤡 ~ this.$store.state.app.userInfo:', this.$store.state.user.tenantId)
    if (data) {
      this.searchForm.timeType = data.message
      this.search()
    }
  },
  methods: {
    // 查询条件
    search() {
      let obj = {
        timeType: this.searchForm.timeType,
        tenantId: this.searchForm.tenantId != 'all' ? this.searchForm.tenantId : '',
        shipId: this.shipId,
        startTime: this.dataTimeArr && this.dataTimeArr.length > 0 ? `${this.dataTimeArr[0]} 00:00:00` : '',
        endTime: this.dataTimeArr && this.dataTimeArr.length > 0 ? `${this.dataTimeArr[1]} 23:59:59` : ''
      }
      this.getHeaderWarnSummary(obj)
      this.getShipSummary(obj)
    },
    // 头部数量
    async getHeaderWarnSummary(obj) {
      this.shipArr = []
      const { result } = await getWarnSummary(obj)
      this.contentArr = result.warningCountVoList
      // for (let index = 0; index < 12; index++) {
      //   this.contentArr.push({ shipId: '1646767111963078658', shipName: 'APP1.1本地', warningCount: 69 })
      // }
      this.contentArr.map((i) => {
        if (!i.tenantId) {
          this.shipArr.push({
            tenantName: '全部',
            tenantId: 'all'
          })
        } else {
          this.shipArr.push(i)
        }
      })

      this.modelLevelCountList = result.modelLevelCountList
      this.modelTypeCountList = result.modelTypeCountList
      this.initWarnType()
      this.initWarnLevel()
    },
    // 船舶告警左侧统计
    async getShipSummary(obj) {
      const { result } = await getShipWarnSummay(obj)
      this.shipWarnArr = result
      this.shipName = this.shipWarnArr[0] && this.shipWarnArr[0].shipName
      this.shipId = this.shipWarnArr[0] && this.shipWarnArr[0].shipId
      this.list = []
      this.getShipDetail({ ...obj, shipId: this.shipId })
    },
    // 船舶告警统计详情
    async getShipDetail(obj) {
      const { result } = await getShipWarnDetail(obj)
      this.list = [result]
    },
    // 选择时间类型
    handleChangeTime(value) {
      this.chooseIndex = 0
      this.searchForm.tenantId = 'all'
      this.dataTimeArr = []
      this.searchForm.timeType = value
      this.search()
    },
    handleChangeDate() {
      this.search()
    },
    // 告警类型统计
    initWarnType() {
      var xdata = []
      var valdata = []
      this.modelTypeCountList.map((i) => {
        valdata.push(i.count)
        xdata.push(i.name)
      })
      var chartDom = document.getElementById('warnType')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        grid: {
          left: '4%',
          right: '5%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return (
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#2783FF'></span>" +
                params[0].name +
                ' : ' +
                Number(params[0].value).toLocaleString() +
                ' 次<br/>'
            )
          }
        },
        xAxis: {
          type: 'category',
          data: xdata,
          axisLabel: {
            color: '#000',
            fontSize: 12,
            interval: 0,
            rotate: 20
          }
        },
        yAxis: {
          name: '单位：次',
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            data: valdata,
            type: 'bar',
            showBackground: true,
            color: '#2783FF',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 20
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    // 告警等级统计
    initWarnLevel() {
      var data = []
      var titlename = []
      var valdata = []
      var myColor = ['#D85E5D', '#EAC75A', '#73A0FA']
      this.modelLevelCountList.map((i) => {
        valdata.push(i.count)
        data.push(i.count)
        titlename.push(i.name)
      })
      var chartDom = document.getElementById('warnLevel')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        grid: {
          left: '6%',
          right: '5%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: true
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              textStyle: {
                color: function (value, index) {
                  var num = myColor.length
                  return myColor[index % num]
                }
              },
              formatter: function (value, index) {
                return ['{title|' + value + '} '].join('\n')
              },
              rich: {}
            }
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                color: function (value, index) {
                  var num = myColor.length
                  return myColor[index % num]
                }
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: valdata,
            barWidth: 30,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                }
              }
            }
            // label: {
            //   normal: {
            //     show: true,
            //     position: "inside",
            //     formatter: "{c}%",
            //   },
            // },
          }
        ]
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    handleChangeIndex(value) {
      this.chooseIndex = value
      this.searchForm.tenantId = this.contentArr[value].tenantId
      this.search()
    },
    handleChangeTenant(value) {
      this.searchForm.tenantId = value
      if (value == 'all') {
        this.chooseIndex = 0
      } else {
        this.contentArr.forEach((item, index) => {
          if (item.tenantId == value) {
            this.chooseIndex = index
          }
        })
      }
      this.handleChangeIndex(this.chooseIndex)
    },
    handleChangeShipIndex(value) {
      this.shipIndex = value
      this.shipName = this.shipWarnArr[value].shipName
      let obj = {
        timeType: this.searchForm.timeType,
        tenantId: this.searchForm.tenantId,
        shipId: this.shipWarnArr[value].shipId,
        startTime: this.dataTimeArr && this.dataTimeArr.length > 0 ? `${this.dataTimeArr[0]} 00:00:00` : '',
        endTime: this.dataTimeArr && this.dataTimeArr.length > 0 ? `${this.dataTimeArr[0]} 23:59:59` : ''
      }
      this.getShipDetail(obj)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables';
.index-box {
  background: none;
  padding: 0;

  .el-ship {
    position: absolute;
    top: 50%;
    margin-top: -8px;
  }

  .index-content {
    height: calc(100% - 85px);
    .content-top {
      display: flex;
      padding-left: 10px;
      &-box {
        width: 200px;
        height: 60px;
        background: #ffffff;
        border-radius: 10px 10px 0px 0px;
        margin-right: 20px;
        margin-top: 22px;
        color: #2c5084;
        cursor: pointer;

        .content-warn {
          font-size: 16px;
          display: flex;
          align-items: center;
          flex-direction: column;
          padding-top: 7px;

          div {
            &:last-child {
              margin-top: 6px;
            }
          }
        }

        .content-ship {
          padding: 7px 20px;
          display: flex;
          flex-direction: column;

          &-top {
            display: flex;
            align-items: center;
            font-size: 14px;

            img {
              margin-right: 16px;
            }
          }

          &-count {
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 6px;
          }
        }
      }

      &-choose {
        width: 200px;
        height: 82px;
        background: var(--theme);
        border-radius: 10px 10px 0px 0px;
        color: #fff;
        margin-right: 20px;
        cursor: pointer;

        .content-warn {
          width: 200px;
          font-size: 18px;
          display: flex;
          align-items: center;
          flex-direction: column;
          padding-top: 10px;
          font-weight: 500;

          div {
            &:last-child {
              margin-top: 10px;
            }
          }
        }

        .content-ship {
          padding: 10px 20px;
          display: flex;
          flex-direction: column;

          &-top {
            display: flex;
            align-items: center;
            font-size: 16px;

            img {
              margin-right: 16px;
            }
          }

          &-count {
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
          }
        }
      }
      .company-name {
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
        width: 130px;
        overflow: hidden;
      }
    }

    .content-bottom {
      background: #ffffff;
      box-shadow: 0px 2px 7px 0px rgba(67, 138, 225, 0.2);
      border-radius: 6px;
      height: calc(100% - 85px);
      overflow-y: auto;
      @include scrollBar();
      padding: 40px 30px;

      &-warn {
        display: flex;
        justify-content: space-around;
        height: 500px;

        .content-warntype {
          width: 50vw;
          height: 400px;
          padding: 10px 0;
          box-shadow: 0px 3px 20px 2px rgba(141, 141, 141, 0.16);
          margin-right: 20px;
        }

        .content-warnlevel {
          width: 30vw;
          height: 400px;
          padding: 10px 0;
          box-shadow: 0px 3px 20px 2px rgba(141, 141, 141, 0.16);
        }
      }

      &-ship {
        display: flex;

        .content-ship-left {
          padding-right: 35px;
          border-right: 1px solid #e5e5e5;
          margin-right: 38px;

          .content-ship-box {
            width: 160px;
            height: 56px;
            background: #ffffff;
            border-radius: 5px;
            border: 1px solid #73a0fa;
            color: #73a0fa;
            padding: 4px 11px;
            text-align: center;
            font-size: 14px;
            margin-bottom: 20px;
            cursor: pointer;

            .content-ship-line {
              padding-bottom: 2px;
              border-bottom: 1px solid #73a0fa;
              margin-bottom: 2px;
            }
          }

          .content-ship-choose {
            background: #6d9af4;
            color: #fff;

            .content-ship-line {
              border-bottom: 1px solid #fff;
            }
          }
        }

        .content-ship-right {
          flex: 1;
          &-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 32px;

            .contnet-right-title {
              font-size: 18px;
              color: #333;
            }
          }
          .ship-box {
            margin-bottom: 40px;
            .content-ship-title {
              display: flex;
              align-items: center;
              margin-bottom: 20px;

              .ship-circle {
                width: 15px;
                height: 15px;
                background: #ffffff;
                border: 3px solid #2c5084;
                margin-right: 12px;
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
  }
}

.index-search, .crud-tabs__card{
  background: #e9eff7 !important;
}
.content-top{
  background: #e9eff7 !important;
  padding-top: 37px;
  border-bottom: 10px solid #d3dce6;
}
</style>
